<script lang="ts">
export default {
  name: 'homePage'
}
</script>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { TabsPaneContext, UploadProps } from 'element-plus'
import { Plus, UploadFilled } from '@element-plus/icons-vue'


let activeName = ref('adult');
let coat = ref<string[]>([])
  let bottoms = ref<string[]>([])
const coatOptions = [
  {
    value: '短袖',
    label: '短袖',
  },
  {
    value: '夹克',
    label: '夹克',
  }
]
const bottomsOptions = [
  {
    value: '短裤',
    label: '短裤',
  },
  {
    value: '长裤',
    label: '长裤',
  }
]
let mannequin = ref([{
  url: '../assets/mannequin/3.jpg',
  name: '安娜'
},
{
  url: '../assets/mannequin/2.jpg',
  name: '黛西'
},
{
  url: '../assets/mannequin/1.jpg',
  name: '林夏'
}])
let posture = ref([{
  url: '../assets/posture/3.jpg',
},
{
  url: '../assets/posture/2.jpg',
},
{
  url: '../assets/posture/1.jpg',
}])
const handleClick = (tab: TabsPaneContext, event: Event) => {
  //tab切换成人和儿童后的逻辑
}

const toGenerate=() => {
  console.log('coat.valu ??',coat.value);
if(coat.value.length==0&&bottoms.value.length==0){
  ElMessage.error('请至少填入一个衣物款式标签')
}else{
//调用生成接口
}
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== "image/png") {
    ElMessage.error('请选择图片!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不可以超过 2MB!')
    return false
  }
  return true
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log('成功响应！', response);
  console.log('文件信息！', uploadFile);
  mannequin.value.push({
    url: URL.createObjectURL(uploadFile.raw!),
    name: uploadFile.name
  })
}

function getImageUrl(url: string) {
  return new URL(url, import.meta.url).href;
}
</script>

<template>
  <el-container>
    <el-header>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="成人" name="adult">
        </el-tab-pane>
        <el-tab-pane label="儿童" name="child">
        </el-tab-pane>
      </el-tabs>
    </el-header>
    <el-container>
      <el-aside width="380px">
        <div class="leftCont">
          <div class="leftCont_top">
            <h2>选择模特</h2>
            <div class="list">
              <el-row :gutter="15">
                <el-col :span="12" v-for="(item, index) in mannequin" :key="index">
                  <el-card style="margin-bottom: 15px;" :body-style="{ padding: '0px' }">

                    <div>
                      <el-image style="width: 100%; height:135px" :src="getImageUrl(item.url)" fit="fill" />

                    </div>
                    <div class="card-footer">
                      {{ item.name }}
                    </div>

                  </el-card>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" class="avatar-uploader"
                      :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                      <el-icon size="40">
                        <Plus />
                      </el-icon>
                    </el-upload>
                  </div>
                </el-col>
              </el-row>
            </div>

          </div>

          <div class="leftCont_bottom">

            <h2>选择姿势</h2>
            <div class="list">
              <el-row :gutter="15">
                <el-col :span="12" v-for="(item, index) in posture" :key="index">
                  <el-card style="margin-bottom: 15px;" :body-style="{ padding: '0px' }">

                    <div>
                      <el-image style="width: 100%; height:165px" :src="getImageUrl(item.url)" fit="fill" />
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" class="avatar-uploader"
                      :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                      <el-icon size="40">
                        <Plus />
                      </el-icon>
                    </el-upload>
                  </div>
                </el-col>
              </el-row>
            </div>

          </div>
          <div class="leftCont_footer">
            <el-button type="primary" size="large" round @click="toGenerate()">去生成</el-button>
          </div>
        </div>

      </el-aside>
      <el-main>
        <div class="rightCont">

          <div class="uploadCenter">

            <div class="uploadCenter_l">
              <div>
                <el-upload class="upload-demo" drag
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    点击拖曳图片至此处上传 <em>上装</em>图片<br />
                    支持JPG,JPEG,PNG,HEIC
                  </div>

                </el-upload>
                <div class="selectItem">
                  <label>
                    上装款式:
                  </label>
                  <el-select v-model="coat" multiple filterable allow-create default-first-option
                    :reserve-keyword="false" placeholder="选择或输入标签" style="width: 240px">
                    <el-option v-for="item in coatOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>

                </div>

              </div>


            </div>

            <div class="uploadCenter_l">
              <div>
                <el-upload class="upload-demo" drag
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"  >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    点击拖曳图片至此处上传<em>下装</em>图片<br />
                    支持JPG,JPEG,PNG,HEIC
                  </div>

                </el-upload>
                <div class="selectItem">
                  <label>
                    下装款式:
                  </label>
                  <el-select v-model="bottoms" multiple filterable allow-create default-first-option
                    :reserve-keyword="false" placeholder="选择或输入标签" style="width: 240px">
                    <el-option v-for="item in bottomsOptions" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>

                </div>

              </div>


            </div>
          </div>

        </div>


      </el-main>
    </el-container>
  </el-container>



  <!-- <el-row :gutter="20">
    <el-col :span="8">
   

    </el-col>


    <el-col :span="16">
    
    </el-col>
  </el-row> -->


</template>

<style scoped lang="scss">
 .el-main{
  border-left: 1px solid #eee;
}
.avatar-uploader {
  width: 100%;

  display: block;
}

.card-footer {
  padding: 5px 15px;
  text-align: center;
  background: #fff;
  min-height: 20px;
  line-height: 15px;
}

.leftCont {
  height: 100vh;
  border-right: 1rpx solid #eee;

  .leftCont_top,
  .leftCont_bottom {
    padding: 0px 20px;
  }

  .leftCont_footer {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.rightCont {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 150px;

  .uploadCenter {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .uploadCenter_l {
    padding: 20px;
    border: 1px solid #eee;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  height: 170px;
  width: 100%;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>